<template>
  <tiny-input
    ref="ltextRef"
    :model-value="modelValue"
    :type="type"
    :size="size"
    :clearable="clearable"
    :placeholder="placeholder"
    :disabled="disabled"
    :digits="precision"
    :show-password="showPassword"
    :maxlength="maxlength"
    :minlength="minlength"
    :autofocus="autofocus"
    :readonly="readonly"
    :rows="rows"
    :input-style="inputStyle"
    :style="{width: width ? (typeof width === 'number' ? (width+'px') : width) :''}"
    :class="[noborder?'noborder':'', borderBottom ? 'bt':'']"
    @keydown="keydownEvent"
    @input="input"
    @clear="clear"
    @blur="blur"
    v-bind="$attrs"
  >
    <template #suffix>
      <el-button  v-if="showMore" icon="ele-More" @click="clickMore" title="弹出批量选择" link />
    </template>
  </tiny-input>
</template>
<script>
// 文本输入框
import tool from '@/utils/tool'
import { Input } from '@opentiny/vue'

export default {
  name: 'ltext',
  props: {
    modelValue: { type: [Number, String], default: '' },
    placeholder: { type: [Number, String], default: '' },
    invId: {type: [String, Number], default: ''},
    buId: {type: [String, Number], default: ''},
    transType: {type: [String, Number], default: ''},
    unit: {type: [String, Number], default: ''},
    cat: {type: String, default: ''}, // 取数据cat分类
    height: { type: [Number, String], default: '' },
    width: { type: [Number, String], default: '' },
    type: { type: [Number, String], default: 'text' },
    size: { type: [Number, String], default: 'small' },
    precision: { type: Number, default: 0 },
    maxlength: { type: Number, default: null },
    minlength: { type: Number, default: null },
    rows: { type: Number, default: null },
    clearable: { type: Boolean, default: true },
    autofocus: { type: Boolean, default: false },
    autoSelect: { type: Boolean, default: false },
    readonly: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    showMore: { type: Boolean, default: false },
    int: { type: Boolean, default: false },
    float: { type: Boolean, default: false },
    money: { type: Boolean, default: false },
    hasDrop: { type: Boolean, default: false },
    showPassword: { type: Boolean, default: false },
    noborder: { type: Boolean, default: false },
    borderBottom: { type: Boolean, default: false },
  },
  emits: ['update:modelValue', 'enter', 'left', 'down', 'up', 'right', 'clickMore'],
  components: {
    TinyInput: Input
  },
  data() {
    return {
      showDrop: false,
      list: []
    }
  },
  computed: {
    inputStyle () {
        return {
          height: this.height ? (typeof this.height === 'number' ? (this.height+'px'):this.height) :'',
          textAlign: (this.float || this.money || this.int) ? 'right' :'left',
        }
    }
  },
  methods: {
    update (value) {
      this.$emit('update:modelValue', value.target.value)
    },
    clear () {
      this.$emit('update:modelValue', '')
    },
    input(value) {

      // let val = value
      // if (value) {
      //   if(this.int) {
      //     val = tool.xe.toNumber(value) === 0 ? '' : tool.xe.toNumber(value)
      //   } else if(this.float || this.money) {
      //     if(value.indexOf('.') !== -1) {
      //       let arr = value.split('.')
      //       if(arr.length > 2) {
      //         val = tool.xe.toNumber(value)
      //       }
      //       else {
      //         if(arr[1]) {
      //           val = arr[0] + '.' + tool.xe.toNumber(arr[1])
      //         }
      //       }
      //     }
      //     else {
      //       val = tool.xe.toNumber(value) === 0 ? '' : tool.xe.toNumber(value)
      //     }
      //   }
      // }
     this.update(value)
    },
    blur () {
      if(this.hasDrop)
        this.showDrop = false
      this.$refs && this.$refs.ltextRef && this.$refs.ltextRef.blur()
    },
    focus () {
      this.$refs.ltextRef.focus()
    },
    select () {

    },
    keydownEvent (e) {
      if(e.key) {
        let key = e.key ? e.key : e.$event.key
        let start = e.target.selectionStart // 光标位置
        switch (key) {
          case 'Enter': {
            this.$emit('enter')
          } break
          case 'ArrowLeft': {
            if(start === 0) {
              this.$emit('left')
            }
          }
            break
          case 'ArrowRight': {
            if(start === (this.modelValue?tool.xe.toString(this.modelValue).length:0)) {
              this.$emit('right')
            }
          }
            break
          case 'ArrowDown': {
            this.$emit('down')
          } break
          case 'ArrowUp': {
            this.$emit('up')
          } break
        }
      }
    },
    clickMore () {
      this.$emit('clickMore')
    }
  },
  watch: {}
}
</script>
<style  lang="scss">
.el-input__wrapper {
  border-radius: 0;
  padding: 1px 5px;
  background: transparent;
  box-shadow: 0 0 0 0.5px var(--el-input-border-color, var(--el-border-color)) inset;
}
.noborder {
  .el-input__wrapper {
    box-shadow: none;
    //border-bottom: var(--el-border);
  }
  //.el-input.is-disabled .el-input__wrapper {
  //  box-shadow: none;
  //}
}
.el-input.is-disabled .el-input__wrapper {
  box-shadow: none;
  background-color: white;
}
.bt {
  .el-input__wrapper {
    box-shadow: none;
    border-bottom: var(--el-border);
  }
}

.showMore {
  cursor: pointer;
  &:hover {
    color: #3BAFDA;
  }
}
.input-ext {
  position: absolute;
  background-color: white;
  width: 100%;
  z-index: 9999;
  padding: 5px;
  border-left:var(--el-border) ;
  border-right:var(--el-border) ;
  border-bottom:var(--el-border) ;
  .item {
    &:hover {
      cursor: pointer;
      background-color: #e2e2e2;
    }
  }
}
</style>